<template>
  <div>
    <el-form :model="form" :inline="true" label-width="80px">
      <el-row>
        <el-col :span="4.5">
          <el-form-item label="选择人员" prop="userId">
            <el-select v-model="form.userId" placeholder="请选择">
              <el-option v-for="item in xiaoShou" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <div class="block" style="margin-left: 20px;">
          <span class="demonstration">选择时间范围</span>
          <el-date-picker v-model="value1" type="datetimerange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
          <el-button type="primary" @click="saveC" :disabled="!form.userId||!this.value1">查询</el-button>
        </div>
      </el-row>
    </el-form>
    <div  v-if="none">
      <div id="main" style="width: 1000px;height:500px;"></div>
      <div id="main1" style="width: 1000px;height:500px;"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Echarts',
  data() {
    return {
      none:true,
      form: {
        userId:null,
      },
      value1: null,
    }
  },
  methods:{
    myEchartss(){
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('main1'));
      // 指定图表的配置项和数据
      var option = {
    	   title: {
    	          text: '主标题',
    	          subtext: '子标题',
    	          left: 'center'
    	      },
    	      tooltip: {
    	          trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'      //显示比例
    	      },
    	      legend: {                      //图例组件
    	          orient: 'vertical',
    	          left: 'left',
                bottom:'100px'
    	      },
    
    	      series: [
    	          {
    	              name: '访问来源',
    	              type: 'pie',
    	              radius: '70%',      //饼状图大小
    	              data: [
    	                  {value:this.qqq, name: '新车销量'},
    	                  {value: 0.25, name: '城区交付数量'},
    	                  {value: 0.30, name: '城郊交付数量'},
    	                  {value: 0.40, name: '区域外交付数量'},
                        {value: 0.10, name: '展厅留档量'},
    	                  {value: 0.5, name: '展厅线索量'}
    	              ],
    	              emphasis: {
    	                  itemStyle: {
    	                      shadowBlur: 10,
    	                      shadowOffsetX: 0,
    	                      shadowColor: 'rgba(0, 0, 0, 0.5)'
    	                  }
    	              }
    	          }
    	      ]
      };
    
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      },
	  myEcharts(){
		  // 基于准备好的dom，初始化echarts实例
		  var myChart = this.$echarts.init(document.getElementById('main'));
		  // 指定图表的配置项和数据
		  var option = {
			     title: {
			         text: '折线图堆叠'
			     },
			     tooltip: {
			         trigger: 'axis'
			     },
			     legend: {
			         data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
                
			     },
			     grid: {
			         left: '3%',
			         right: '4%',
			         bottom: '3%',
			         containLabel: true
			     },
			     toolbox: {
			         feature: {
			             saveAsImage: {}
			         }
			     },
			     xAxis: {
			         type: 'category',
			         boundaryGap: false,
			         data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
			     },
			     yAxis: {
			         type: 'value'
			     },
         toolbox: {
             show: true,
             feature: {
                 dataZoom: {
                     yAxisIndex: 'none'
                 },
                 dataView: {readOnly: true},        //readOnly只读模式
                 magicType: {type: ['line', 'bar']},
                 restore: {},
                 saveAsImage: {}
             }
         },
			     series: [
			         {
			             name: '邮件营销',
			             type: 'line',
			             stack: '总量',
			             data: [120, 132, 101, 134, 90, 230, 210]
			         },
			         {
			             name: '联盟广告',
			             type: 'line',
			             stack: '总量',
			             data: [220, 182, 191, 234, 290, 330, 310]
			         },
			         {
			             name: '视频广告',
			             type: 'line',
			             stack: '总量',
			             data: [150, 232, 201, 154, 190, 330, 410]
			         },
			         {
			             name: '直接访问',
			             type: 'line',
			             stack: '总量',
			             data: [320, 332, 301, 334, 390, 330, 320]
			         },
			         {
			             name: '搜索引擎',
			             type: 'line',
			             stack: '总量',
			             data: [820, 932, 901, 934, 1290, 1330, 1320]
			         }
			     ]
		  };
		  // 使用刚指定的配置项和数据显示图表。
		  myChart.setOption(option);
		  },

      saveC() {
        //开始时间
         var y = this.value1[0].getYear()+1900
         var m = this.value1[0].getMonth()+1
         var d = this.value1[0].getDate()
         var s = this.value1[0].getHours()
         var f = this.value1[0].getMinutes()
         var miao  = this.value1[0].getSeconds()
         var startTime1=y+'-'+m+'-'+d+' '+  s+":"+f+":"+miao
         var startTime=startTime1.toString()
         //结束时间
         var y2 = this.value1[1].getYear()+1900
         var m2 = this.value1[1].getMonth()+1
         var d2 = this.value1[1].getDate()
         var s2 = this.value1[1].getHours()
         var f2 = this.value1[1].getMinutes()
         var miao2  = this.value1[1].getSeconds()
         var endTime1 = y2+'-'+m2+'-'+d2+' '+s2+":"+f2+":"+miao2
        var endTime=endTime1.toString()


        this.none =true
      },
      getShouHou() {
        this.$ajax.post('AfterSaleTargetZ2Controller/findShouHou', {}).then(res => {
          var result = res.data
          this.xiaoShou = result.data
        })
      },

  },
  mounted() {
  	this.myEcharts();
    this.myEchartss();
  }
}
</script>

<style>

</style>
